<template>
	<view class="content">
		<u-navbar back-text="" slot="center" :autoBack="true" safeAreaInsetTop placeholder>
			<view slot="center" class="leftText">客服</view>
		</u-navbar>
		<view class="center">
			<view class="contacts">
				<view class="info">
					<view class="top">
						<view class="contacts_name" @click="userJob=true">
							<view class="name">{{orderinfo.nickName}}</view>
							<block v-if="orderinfo.isRealName == 1">
								<image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/user-real.svg" />
								<view class="authMe">实名认证</view>
							</block>
						</view>
						<!-- <view class="follow" v-if="isguanzhu == false && orderinfo.pay == 0" @click="guanzhu">关注</view>
						<view class="follow" v-if="isguanzhu == true && orderinfo.pay == 1" @click="noguanzhu">已关注</view> -->
						<!-- <view class="follow" v-if="isguanzhu == false" @click="guanzhu">关注</view>
						<view class="follow" v-if="isguanzhu == true" @click="noguanzhu">已关注</view> -->
					</view>
					<view class="addr">
						<view><u-icon name="map" color="#A1A1A1" size="13"></u-icon>
						{{orderinfo.address?cutstr(orderinfo.address,10):'未定位地址'}} · 刚刚发布</view>
						<!-- <view>关注此人及时获得新职位发布</view> -->
					</view>
				</view>
			</view>
			<view class="jobinfo">	
				<view class="title dis-row poser">
				 <!--   <text class="tips" v-if="orderinfo.type == 1">置顶</text>
				    <view>{{orderinfo.title}}</view> -->
					<text class="tips" v-if="orderinfo.type == 1">置顶</text>
					 <block v-if="orderinfo.type == 1">
					 	 <view v-if="orderinfo.title" style="text-indent: 2.1em;">{{orderinfo.title}}</view>
					 </block>
					 <block v-if="orderinfo.type == 0">
					 	<view v-if="orderinfo.title" >{{orderinfo.title}}</view>
					 </block>
				</view>
				<view class="tag" v-if="orderinfo.welfares && orderinfo.welfares.length>0">
				    <!-- <view class="t1">{{orderinfo.settlementStr}}</view> -->
				    <view v-for="(stritem,strindex) in orderinfo.welfares" :key="strindex">{{stritem}}</view>
				<!--    <view>包吃包住 </view>
				    <view>高温补贴 </view>
				    <view>医疗保险 </view> -->
				</view>
				<view class="work_type" v-for="(item, index) in orderinfo.itemList" :key="index">
					<view class="top">
						<view class="work_type_name">
							<view v-if="item.skillName">{{item.skillName}}</view>
							<view v-if="item.composition">{{item.composition}}</view>
						</view>
						<view class="status" v-if="item.isFinished==1">已招满</view>
					</view>
					<view class="bottom">
						<view v-if="item.personNum">{{item.personNum}}</view>
						<view v-if="item.settlementType">{{item.settlementType}}</view>
						<view v-if="item.salaryUnit" class="t1">{{item.salaryUnit}}</view>
						<view v-if="item.timeLimit">{{item.timeLimit}}</view>
						<view v-if="item.ageReq">{{item.ageReq}}</view>
					</view>
				</view>
				<view class="jobintroduction">
					<view class="title">职位描述</view>
					<view class="tag">
						<view v-for="(s,i) in orderinfo.jobReqs" :key="i">{{s}}</view>
						<!-- <view>平台实名</view>
						<view>个人</view>
						<view>持证</view> -->
					</view>
					<view class="xinzei dis-clm" style="font-size: 28rpx;color: #424242;line-height: 32rpx;">
				<!-- 		<label>薪资待遇:</label> -->
						<view class="xinzi-info" v-html="orderinfo.workDesc">
							
						</view>
					</view>

					<view class="imageslist">
						<view v-for="(k,v) in orderinfo.urlList" :key="v">
							<image mode="aspectFill" :src="k.url" @click="previewImg(v)"></image>
						</view>
					</view>
				<view class="company" v-if="orderinfo.enterPriseName || orderinfo.nickName">
					<block v-if="orderinfo.isRealName==1 && orderinfo.isEnterprice ==1">
						<view class="title" @click="navComNew('qiye')" >
							<image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/comp-real.svg" />
							<view class="name">{{orderinfo.enterPriseName?orderinfo.enterPriseName:'陕西新工建筑工程有限公司'}}<view class="dis-row">在招信息<label style="font-size: 24rpx;color: #0575FF;">{{orderinfo.num}}</label>个</view></view>
						</view>
						<view class="right" @click="navComNew('qiye')">
							<image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/chevron-right5.svg"></image>
						</view>
					</block>
					<block v-if="orderinfo.isRealName!=1 && orderinfo.isEnterprice ==1">
						<view class="title" @click="navComNew('qiye')" >
							<image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/comp-real.svg" />
							<view class="name">{{orderinfo.enterPriseName?orderinfo.enterPriseName:'陕西新工建筑工程有限公司'}}<view class="dis-row">在招信息<label style="font-size: 24rpx;color: #0575FF;">{{orderinfo.num}}</label>个</view></view>
						</view>
						<view class="right" @click="navComNew('qiye')">
							<image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/chevron-right5.svg"></image>
						</view>
					</block>
					<block v-if="orderinfo.isRealName == 1 && orderinfo.isEnterprice !=1">
						<view class="title" @click="navComNew('geren')" >
							<image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/user-real.svg" />
							<view class="name">{{orderinfo.nickName?orderinfo.nickName:'天下工人'}}<view class="dis-row">在招信息<label style="font-size: 24rpx;color: #0575FF;">{{orderinfo.num}}</label>个</view></view>
						</view>
						<view class="right" @click="navComNew('geren')" >
							<image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/chevron-right5.svg"></image>
						</view>
					</block>
					<!-- 	</navigator> -->
						<view class="map">
						<map id="map" :markers="markers" :scale="10" :include-points="markers" class="map"  style="width: 100%;height: 264rpx;" :latitude="orderinfo.lat" :longitude="orderinfo.lon">
							   <view v-for="(m,n) in markers" :key="n" @click="openLoation(orderinfo.lat,orderinfo.lon,markers[0].address)">
								   <view  class="customCallout poser dis-clm">
									<!--   <view class="marktop">工作地点</view> -->
									   <view  class="marktop">{{m.address}}</view>
									<!--   <view class="sanjiao"></view> -->
								   </view>
							   </view>
						</map>
						</view>
					</view>
					
				</view>
			</view>	
			
		</view>
		
		<view style="height: 180rpx;"></view>
		<view class="constacts-footer">
			<view class="footer-con dis-row">
				<view class="ft-v1 dis-clm" @click="conDel">
					<image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/user-avatar3.svg"></image>
					<text>修改</text>
				</view>
				<view class="ft-v1 dis-clm" @click="conBeizhu">
					<image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/contacts/shuaxin.png"></image>
					<text>刷新</text>
				</view>
				<!-- <view class="ft-btn ft-pingjia" v-if="orderinfo.isFinished == 1" @click="iszhaoman">已招满</view>
				<view class="ft-btn ft-pingjia" v-if="orderinfo.isFinished == 0">未招满</view> -->
				<view class="ft-btn ft-pingjia">未招满</view>
				<view class="ft-btn ft-goutong" @click="zhiding">置顶</view>
			</view>
		</view>
		
		<u-popup
			:show="userJob" 
			:round="10" 
			customStyle="width:100%;" 
			overlayOpacity="0.8"
			mode="bottom"
			:closeable="true" 
			@close="closeJob" 
			@open="openJob"
			>
			<view class="userJobList">
				<view class="top">
					<view class="user">
						<image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/user-real.svg" />
						<view>{{orderinfo.nickName}}的招工</view>
					</view>
					<view class="number">在招信息<text>{{userListOrder.length>0?userListOrder.length:0}}</text>个</view>
				</view>
				<scroll-view scroll-y="true" sty class="scroll-Y">
						<view class="list" v-for="(jitem,jindex) in userListOrder" :key="jindex" >
							<view class="title"  @click="navUserOrderInfo(jitem)">
							<!-- 	<text class="tips">置顶</text> -->
								<view>{{cutstr(jitem.titleName,63)}}</view>
						    </view>
						  <view class="cont"
							>{{jitem.workDesc}}</view
						  >
						  <view class="tag"  @click="navUserOrderInfo(jitem)">
							<view class="t1" v-if="jitem.salaryStr">{{jitem.salaryStr}}</view>
							<view v-if="jitem.settlementStr">{{jitem.settlementStr}}</view>
						  <block v-if="jitem.welfareNew">
							  <block v-for="(childitem,childindex) in jitem.welfareNew" :key="childindex">
							   <view v-if="childitem">{{childitem}}</view>
							   </block>
						</block>
						  </view>
						  <view class="info">
							<view class="left">
							  <view class="addr">
								<u-icon name="map" color="#A1A1A1" size="13"></u-icon>
								 {{jitem.cityArea}} ·{{jitem.createTime}}
							  </view>
							</view>
							<view class="right" @click="navUserOrderInfo(jitem)">查看详情</view>
						  </view>
						</view>
						
				</scroll-view>
			</view>
		</u-popup>
		
		
		
		<!--企业信息列表-->
		<u-popup
			:show="workershow" 
			:round="10" 
			customStyle="width:100%;" 
			overlayOpacity="0.8"
			mode="bottom"
			:closeable="true" 
			@close="qiyecloseJob" 
			@open="qiyeopenJob"
			>
			<view class="userJobList">
				<view class="top">
					<view class="user">
						<block v-if="orderinfo.isEnterprice==1">
						    <image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/comp-real.svg" style="width: 48rpx;height: 48rpx;" />
						</block>
						<view>{{orderinfo.enterPriseName}}的招工</view>
					</view>
					<view class="number">在招信息<text>{{userListOrder.length>0?userListOrder.length:0}}</text>个</view>
				</view>
				<scroll-view scroll-y="true" sty class="scroll-Y">
						<view class="list" v-for="(rowitem,rowindex) in workerListRow" :key="rowindex" >
							<view class="title"  @click="navUserOrderInfo(rowitem)">
								<view style="width: 100%;text-align: left;">{{cutstr(rowitem.titleName,63)}}</view>
						    </view>
						  <view class="cont"
							>{{rowitem.workDesc}}</view
						  >
						  <view class="tag"  @click="navUserOrderInfo(rowitem)">
							<view class="t1" v-if="rowitem.salaryStr">{{rowitem.salaryStr}}</view>
							<view v-if="rowitem.settlementStr">{{rowitem.settlementStr}}</view>
						  <block v-if="rowitem.welfareNew">
							  <block v-for="(childitem,childindex) in rowitem.welfareNew" :key="childindex">
							   <view v-if="childitem">{{childitem}}</view>
							   </block>
						</block>
						  </view>
						  <view class="info">
							<view class="left">
							  <view class="addr">
								<u-icon name="map" color="#A1A1A1" size="13"></u-icon>
								 {{rowitem.cityArea}} ·{{rowitem.createTime}}
							  </view>
							</view>
							<view class="right" @click="navUserOrderInfo(rowitem)">查看详情</view>
						  </view>
						</view>
						
				</scroll-view>
			</view>
		</u-popup>
		
		
	</view>
</template>
<script>
	import store from '@/common/store.js'
	import Index from '@/common/index-model.js'
	let index=new Index();
	export default {
		data() {
			return {
				workershow:false, // 企业发布的信息列表显示
				workerListRow:[],
				telTips: false,
				fraction: false,
				userJob: false,
				horizontal: 'right',
				vertical: 'bottoms',
				search: "",
				advimgsrc: "http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/release.svg",
				list1: [],
				list2: [],
				current: -1,
				lTab: 0,
				orderinfo:{},
				oid:'',
				isguanzhu:false,
				issc:false,
				toporderlist:[],
				userListOrder:[],//发布用户的列表
				markers: [{
					id:1,
					latitude: 39.909,
					longitude: 116.39742,
					width:18,
					height:18,
					iconPath: '../../static/img/jmap.png'
				}],
				strmap:null
			};
		},
		onLoad(opt) {
			this.oid = opt.id
			this.strmap=uni.createMapContext('map',this)
			if(!uni.getStorageSync('token')){
				index.show_tips('请先登录')
				setTimeout(()=>{
					index.navigate_to('../../pagesC/login/login');
					//index.navigate_back(1)
				},300)
			}else{
				this.getOrderInfo(opt.id)
			}
		},
		methods: {
			qiyecloseJob() {
				this.workershow = false
			},
			qiyeopenJob() {
				this.workershow = true
			},
			//获取企业发布的信息列表
			getWorkListRow() {
				if(this.orderinfo.isEnterprice == 1 && this.orderinfo.enidentity){
					let url="client/job/select/orders/"+this.orderinfo.enidentity
					let arr= [],welfares=[]
					this.listrow = []
					index.getPublicUserMember({},url,'get',res=>{
						if(res.data.code == 200 && res.data.success){
							arr = res.data.result
							if(arr.length>0){
							  for(let i=0;i<arr.length;i++){
							    arr[i].titleName = arr[i].address+'招'+arr[i].skills  //拼接地址+技能 = 列表标题
								if(arr[i].welfare){
									welfares=arr[i].welfare.split(',');
									for(let i=0;i<welfares.length;i++){
										if(welfares[i] == ''){
											welfares.splice(i,1)
										}
									}
									arr[i].welfareNew = welfares;
									//arr[i].welfareNew = arr[i].welfare.split(',')
								}else{
									arr[i].welfareNew = []
								}
								this.workerListRow.push(arr[i])
							  }
							}
						}else{
							this.workerListRow = []
						}
					})
				}else{
					this.workerListRow = []
				}
			},
			openLoation(lat,lon,address) {
				console.log(lat,lon)
				this.strmap.openMapApp({
					latitude:Number(lat),
					longitude:Number(lon),
					destination:address,
					success: (res) =>{
						//console.log(res,'====reee==')
					},
					fail: (err)=>{
						//console.log(err,'====err==')
					}
				})
			},
			//重新上线
			iszhaoman() {
				let url="client/job/come/back/online/"+this.orderinfo.orderId
				index.getPublicUserMember({},url,'post',res=>{
					if(res.data.code == 200 && res.data.success){
						index.show_tips('好活重新上线')
						setTimeout(()=>{
							this.getOrderInfo(this.orderinfo.orderId)
						},500)
					}else{
						index.show_tips(res.data.message)
						return false
					}
				})
			},
			zhiding() {
				let url='../../pagesC/jobTop/index?id='+ this.orderinfo.orderId
				index.navigate_to(url)
			},
			conDel(){
				if(!this.orderinfo.orderId){
					index.show_tips('参数错误')
					return false
				}
				let url="../../pagesC/perfect/editprefect?id="+this.orderinfo.orderId
				//console.log(url,'---u--')
				index.redirectto(url)
			},
			conBeizhu() {
				this.getOrderInfo(this.orderinfo.orderId)
			},
			//查询发布的信息条数
			exclusive() {
				let send={
					"userId":this.orderinfo.userId
				}
				let url="client/job/find/orders/" + this.orderinfo.userId
				this.userListOrder = []
				index.getPublicUserMember({},url,'get',res=>{
					if(res.data.code == 200 && res.data.success){
						 let arr = res.data.result
						for(let i=0;i<arr.length;i++){
							arr[i].titleName = arr[i].address+'招'+arr[i].skills  //拼接地址+技能 = 列表标题
						   if(arr[i].welfare){
						   	arr[i].welfareNew = arr[i].welfare.split(',')
						   }else{
						   	arr[i].welfareNew=[]
						   }
						   this.userListOrder.push(arr[i])	
						}
					}else{
						this.userListOrder = []
					}
				})
			},
		  navUserOrderInfo(item) {
				let url="./index?id=" + item.id
				  index.redirectto(url) 
		   },
		   NavTaskInfo(item) {
			   //console.log(item,'====ttt====')
			   let url="./index?id=" + item.orderId
			  index.redirectto(url) 
		   },	
			//图片预览
			previewImg(v) {
				if(this.orderinfo.urlList.length>0){
					let imgs = this.orderinfo.urlList.map(item=>{
						return item.url
					})
					uni.previewImage({
						current: v,
						urls: imgs
					});
				}
			},
			//企业相关信息
			navComNew(value) {
				// let url = "../companyInfo/index"
				// index.navigate_to(url)
				// return false
				console.log(this.orderinfo.enidentity,'===this.orderinfo.enidentity====')
				if(value == 'geren'){
					this.userJob = true
				}else{
					// let url = "../companyInfo/index?enidentity="+this.orderinfo.enidentity
					// index.redirectto(url)
					this.workershow = true
				}
				return false
				//index.navigate_to(url)
			},
			//执行关注
			guanzhu() {
				let url="client/job/add/attention/"+this.orderinfo.orderId
				index.getPublicUserMember({},url,'post',res=>{
					if(res.data.code == 200 && res.data.success){
						index.show_tips('关注成功')
						this.isguanzhu = true
					}else{
						if(res.data.code =="100006" && res.data.success==false ){
							this.isguanzhu = true
							index.show_tips(res.data.message)
							return false
						}else{
							this.isguanzhu = false
							index.show_tips(res.data.message)
							return false
						}
					}
				})
			},
			//取消关注
			noguanzhu() {
				let url="client/job/del/attention/"+this.orderinfo.orderId
				index.getPublicUserMember({},url,'post',res=>{
					//console.log(res,'====vcvv===')
					if(res.data.code == 200 && res.data.success){
						index.show_tips('取消关注成功')
						this.isguanzhu = false
					}else{
						this.isguanzhu = true
						index.show_tips('您还未关注')
						return false
					}
				})
			},
			clickTabs({ index }) {
				this.current = index;
			},
			close() {
			    this.telTips = false;
			},
			open() {
			},
			closeFraction() {
			    this.fraction = false;
			},
			openFraction() {
			},
			closeJob() {
			    this.userJob = false;
			},
			openJob() {
			},
			btnClick() {
				// let url="../../pagesC/vipmember/vipuser"
				// index.navigate_to(url)
			},
			btnTouchstart() {},
			btnTouchend() {},
			showtelTips() {
				 this.telTips=true;             
			},
			showFraction() {
				 this.fraction=true;             
			},
			ShowUserJob(){
				this.fraction=true;
			},
			//获取详情
			getOrderInfo(orderid) {
				// console.log(orderid);
				let url="client/job/find/details/"+orderid
				index.getPublicUserMember({},url,'get',res=>{
				//	console.log(res);
					let welfares =[]
					if(res.data.code == 200 && res.data.success){
						this.orderinfo = res.data.result;
						this.isguanzhu =(this.orderinfo.pay==1)?true:false
						welfares = res.data.result.welfare;
						if(welfares && welfares.length>0){
							welfares=welfares.split(',');
							for(let i=0;i<welfares.length;i++){
								if(welfares[i] == ''){
									welfares.splice(i,1)
								}
							}
						}
						console.log(welfares);
						this.orderinfo.welfares = welfares
						this.isguanzhu = this.orderinfo.pay==0?false:true
						let jobReqs = res.data.result.jobReq;
						if(welfares){
							jobReqs= jobReqs.split(',');
							for(let i=0;i<jobReqs.length;i++){
								if(jobReqs[i] == ''){
									jobReqs.splice(i,1)
								}
							}
						}
						this.orderinfo.jobReqs = jobReqs
						this.markers[0].latitude = res.data.result.lat?res.data.result.lat:0
						this.markers[0].longitude = res.data.result.lon?res.data.result.lon:0
						this.markers[0].customCallout= {
							        anchorY: 0, // Y轴偏移量
									anchorX: 0, // X轴偏移量
									display: 'ALWAYS' ,// 一直展示
									}
						this.markers[0].address = res.data.result.address		
                        this.exclusive()
						this.getWorkListRow()
					}
				})
			},
			
			cutstr(str, len) {
				var str_length = 0;
				var str_len = 0;
				var str_cut = new String();
				str_len = str.length;
				for (var i = 0; i < str_len; i++) {
					var a = str.charAt(i);
					str_length++;
					if (escape(a).length > 4) {
						//中文字符的长度经编码之后大于4  
						str_length++;
					}
					str_cut = str_cut.concat(a);
					if (str_length >= len) {
						str_cut = str_cut.concat("...");
						return str_cut;
					}
				}
				//如果给定字符串小于指定长度，则返回源字符串；  
				if (str_length < len) {
					return str;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
@import url("index.css");
@import url("@/static/css/publics.css");
.constacts-footer{
	width: 100%;background-color: #F8F8F8;position: fixed;left: 0rpx;bottom: 0rpx;
}

.footer-con{padding: 20rpx 20rpx 0rpx 20rpx;}
.ft-v1{width: 100rpx;}
.ft-v1 image{display: block;width: 48rpx;height: 48rpx;margin: 0rpx auto;}
.ft-v1 text{display: block;font-size: 28rpx;color: #3D3D3D;text-align: center;}
.ft-btn{width: 240rpx;height: 88rpx;font-size: 28rpx;font-weight: bold;line-height: 88rpx;
text-align: center;border-radius: 6rpx;}
.ft-pingjia{background-color: #FFA23F;color: #ffffff;margin:0rpx 20rpx 0rpx 20rpx;}
.ft-goutong{background-color: #0575FF;color: #ffffff;}
::v-deep {
  .u-navbar--fixed {	  
	  background: #fff;
    // background-image: linear-gradient(to bottom, #42cdff, #0288ff);
    & > view {
      background: transparent !important;
    }
    .leftText {
      color: #000;
    }
  }
}
.customCallout {
	font-size: 24rpx;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.5);
	// box-shadow: 0px 4rpx 16px 0px rgba(189, 191, 193, 0.4);
	border-radius: 4rpx;
	display: inline-flex;
	color: #fff;
	min-width: 710rpx;
	margin-top: 220rpx;
	// padding: 15rpx 0rpx 25rpx 0rpx;
}
.marktop{padding: 0rpx 20rpx;}
.telTips{ padding: 32rpx 40rpx 20rpx 20rpx; text-align: center;
	image{
		width: 48rpx;
		height: 48rpx;
		margin-bottom: 16rpx;
	}
	view:nth-child(2){
		font-size: 36rpx!important;
		margin-bottom: 16rpx;
		font-weight: 500;
	}
	view:nth-child(3){
		font-size: 28rpx!important;
		font-weight: 100;
	}
}

.fraction{
	padding: 32rpx 40rpx 20rpx 20rpx;
	text-align: left;
	image{
		width: 96rpx;
		height: 96rpx;
	}
	view:nth-child(2){
		font-size: 36rpx;
		margin-bottom: 48rpx;
	}
}

.userJobList{
	padding: 32rpx 20rpx;
	.scroll-Y {
		margin-top: 52rpx;
		max-height: 60vh;
	}
	.top{
		.user{
			display: flex;
			margin-bottom: 12rpx;
			image{
				width: 28rpx;
				height: 28rpx;
			}
			view{
				line-height: 32rpx;
				margin-left: 16rpx;
				font-size: 32rpx;
			}
		}
		.number{
			margin-left: 44rpx;
			color: #3D3D3D;
			font-size: 24rpx;
			text{
				color: #0575FF;
				margin-left: 8rpx;
			}
		}
	}
	.complist{
		// background-image: url('http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/comp-bg.png');
		background-repeat: no-repeat;
		background-position: bottom left;
	}
	.list {
	  padding: 0rpx 0rpx 0;
	  .title {
	    display: flex;
	    align-items: center;
	    text {
	      background: #ff5964;
	      color: #fff;
	      font-size: 20rpx;
	      padding: 8rpx 14rpx;
	      border-radius: 8rpx;
	    }
	    view {
	      font-size: 36rpx;
	      font-weight: bold;
	      margin-left: 20rpx;
	    }
	  }
	  .cont {
	    margin: 20rpx 0;
	    font-size: 24rpx;
	    color: #424242;
	  }
	  .tag {
	    display: flex;
		flex-wrap: wrap;
	    view {
	      background: #f7f7f7;
	      border-radius: 8rpx;
	      font-size: 28rpx;
	      padding: 5rpx 10rpx;
	      margin-right: 10rpx;
	      color: #424242;
		  margin-bottom: 10rpx;
	    }
	    .t1 {
	      color: #ff5964;
	    }
	  }
	  .info {
	    padding-top: 20rpx;
	    padding-bottom: 30rpx;
	    margin-top: 20rpx;
	    align-items: baseline;
	    border-top: 0.5px solid #f0f0f0;
	    display: flex;
	    justify-content: space-between;
	    .left {
	      .top {
	        display: flex;
	        align-items: center;
	        .name {
	          color: #0f0f0f;
	          font-weight: bold;
	        }
	        image {
	          width: 28rpx;
	          height: 28rpx;
			  margin-left: 14rpx;
			  margin-right: 10rpx;
	        }
	        .authMe {
	          color: #a1a1a1;
	          font-size: 24rpx;
	        }
			.comp {
			  color: #d9a14e;
			  font-size: 24rpx;
			}
	      }
	      .addr {
	        display: flex;
	        color: #a1a1a1;
	        font-size: 24rpx;
	        margin-top: 10rpx;
	        ::v-deep {
	          .u-icon {
	            margin-right: 14rpx;
	          }
	        }
	      }
	    }
	    .right {
	      color: #0575FF;
		  font-size: 24rpx;
		  font-weight: 100rpx;
	    }
	  }
	}
}

.content{
	
}
.center{
	padding: 20rpx 20rpx 0rpx 20rpx;
	background: #fff;
}
.contacts{ 
	background-image: linear-gradient(to bottom, #CBE2FF, #EEF6FF);
	border-radius: 16rpx;
	height: 124rpx;
	padding: 32rpx 20rpx;
	.info {
		align-items: baseline;
		.top {
			align-items: center;
			overflow: hidden;
			width: 100%;
			.contacts_name{
				float: left;
				display: flex;
				.name {
					color: #0f0f0f;
					font-weight: bold;
				}
				image {
					width: 28rpx;
					height: 28rpx;
					margin-left: 14rpx;
					margin-right: 10rpx;
					margin-top: 16rpx;
				}
				.authMe {
					color: #a1a1a1;
					font-size: 24rpx;
					line-height: 60rpx;
				}
				.comp {
					color: #d9a14e;
					font-size: 24rpx;
				}
			}
			.follow{
				float: right;
				border: 1px solid #0575FF;
				background: #fff;
				color: #0575FF;
				border-radius: 30rpx;
				height: 48rpx;
				line-height: 48rpx;
				width: 144rpx;
				text-align: center;
			}
		}
		.addr {
			color: #A1A1A1;
			font-size: 24rpx;
			margin-top: 20rpx;
			overflow: hidden;
			view:nth-child(1){
				display: flex;
				float: left;
				font-size: 24rpx;
				::v-deep {
					.u-icon {
						margin-right: 14rpx;
					}
				}
			}
			view:nth-child(2){
				float: right;
				font-size: 24rpx;
			}
		}
	}
}

.jobinfo{
	.title {
		display: flex;
		align-items: center;
		flex-direction: row;
		margin-top: 32rpx;
		margin-bottom: 32rpx;
		text {
			// background: #ff5964;
			// color: #fff;
			// font-size: 20rpx;
			// padding: 8rpx 14rpx;
			// border-radius: 8rpx;
			  display: inline-block;
			  background: #ff5964;height: 38rpx;line-height: 38rpx;text-align: center;
			  position: absolute;left: 0rpx;top: 12rpx;
			  color: #fff;
			  width: 64rpx;
			  font-size: 20rpx;
			  // padding: 4rpx 10rpx;
			  border-radius: 8rpx;
			  // margin-right: 20rpx;
		}
		view {
			font-size: 36rpx;
			font-weight: bold;
		}
	}
	.tag {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		view {
			background: #E4F0FF;
			border-radius: 8rpx;
			font-size: 28rpx;
			padding: 10rpx;
			margin-right: 10rpx;
			color: #424242;
		}
		.t1 {
			color: #ff5964;
		}
	}
	.work_type {
		align-items: baseline;
		background: #E4F0FF;
		margin-top: 32rpx;
		padding: 20rpx;
		.top {
			align-items: center;
			overflow: hidden;
			width: 100%;
			.work_type_name{
				float: left;
				display: flex;
				view:nth-child(1) {
					color: #424242;
					font-weight: bold;
					height: 40rpx;
					line-height: 40rpx;
				}
				view:nth-child(2) {
					color: #FFFFFF;
					font-weight: bold;
					background: #0575FF;
					height: 40rpx;
					line-height: 40rpx;
					width: 72rpx;
					border-radius: 6rpx;
					text-align: center;
					margin-left: 16rpx;
				}
			}
			.status{
				float: right;
				color: #FF5964;
				font-weight: bold;
				height: 40rpx;
				line-height: 40rpx;
			}
		}
		.bottom {
			color: #A1A1A1;
			font-size: 24rpx;
			margin-top: 20rpx;
			// overflow: hidden;
			display: flex;
			view{
				display: inline-block;
				padding: 0 6rpx;
				border-left: 1px solid #A1A1A1;
				height: 30rpx;
				line-height: 30rpx;
			}
			.t1{
				color: #FF5964;
			}
			view:first-child{
				padding-left: 0;
				border: none;
			}
		}
	}
	.jobintroduction{
		.title{
			font-size: 32rpx;
			color: #3D3D3D;
			margin-bottom: 20rpx;
		}
		.tag{
			display: flex;
			view {
				background: #F7F7F7;
				border-radius: 6rpx;
				font-size: 28rpx;
				padding: 10rpx;
				margin-right: 10rpx;
				color: #424242;
			}
		}
		.xinzei{
			color: #424242;
			margin-top: 20rpx;
		}
		.contents{
			color: #424242;
			margin-top: 20rpx;
		}
		.imageslist{
			display: flex;
			margin-top: 20rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #F0F0F0;
			view{
				width: calc(25% - 16rpx);
				margin-right: 16rpx;
				height: 200rpx;
				overflow: hidden;
				image{
					height: 100%;
					width: 100%;
				}
			}
			
		}
		.company{
			overflow: hidden;
			.title{
				display: block;
				float: left;
				image{
					width: 32rpx;
					height: 32rpx;
					float: left;
					margin-top: 10rpx;
				}
				.name{
					float: left;
					margin: 0rpx;
					font-size: 32rpx;
					margin-left: 10rpx;
					font-weight: 500;
					color: #3D3D3D;
					view{
						font-size: 24rpx;
						font-weight: 100;
						margin-left: 0;
						color: #3D3D3D;
						text{
							color: #0575FF;
							background: none;
							padding: 0;
							display: inline-block;
						}
					}
				}
				
			}
			.right{ 
				float: right;
				margin-top: 50rpx;
				right: 4rpx;
				image{
					width: 32rpx;
					height: 32rpx;
				}
			}
			.map{ clear: both;
				height: 264rpx;
				line-height: 264rpx;
				text-align: center;
				background: #E4F0FF;
				border-radius: 10rpx;
				margin-bottom: 32rpx;
			}
		}
		.contact_comp{
			overflow: hidden;
			display: flex;
			justify-content: space-around;
			.left{
				flex: 1;
				background: #E4F0FF;
				border-radius: 16rpx;
				margin-right: 22rpx;
				padding: 18rpx;
				color: #0F0F0F;
				background-image: url("");
				background-position: right bottom;
				background-repeat: no-repeat;
				background-size: auto 60%;
				view:nth-child(1){
					font-weight: bold;
					margin-bottom: 22rpx;
					height: 96rpx;
					line-height: 48rpx;
				}
				view:nth-child(2){
					font-weight: 100;
					background: #0575FF;
					width: 128rpx;
					height: 48rpx;
					text-align: center;
					color: #FFFFFF;
					border-radius: 6rpx;
				}
			}
			.right{
				flex: 1;
				background: #E4F0FF;
				border-radius: 16rpx;
				padding: 18rpx;
				color: #0F0F0F;
				background-image: url("");
				background-position: right bottom;
				background-repeat: no-repeat;
				background-size: auto 60%;
				view:nth-child(1){
					font-weight: bold;
					margin-bottom: 22rpx;
					height: 96rpx;
					line-height: 48rpx;
				}
				view:nth-child(2){
					font-weight: 100;
					border: 1rpx solid #0575FF;
					width: 128rpx;
					height: 48rpx;
					text-align: center;
					color: #0575FF;
					border-radius: 6rpx;
				}
			}
		}
		.securityTips{
			display: flex;
			margin: 48rpx 0rpx 0rpx 0rpx;
			padding-bottom: 48rpx;
			image{
				
				width: 48rpx;
				height: 48rpx;
			}
			view:nth-child(1){
				margin-right: 10rpx;
			}
			view:nth-child(2){
				margin-right: 20rpx;
				font-size: 28rpx;
				width: 120rpx;
			}
			view:nth-child(3){
				color: #A1A1A1;
				margin-right: 10rpx;
				font-size: 28rpx;
			}
		}
		.similar{ color: #A1A1A1; font-size: 32rpx; padding-bottom: 26rpx;}
	}
}

.index {
	padding-bottom: 140rpx;
	.complist{
		background-image: url('')!important;
		background-repeat: no-repeat!important;
		background-position: bottom left!important;
	}
    .list {
      padding: 20rpx 20rpx 0;
	  background: #fff;
	  margin-top: 20rpx;
  //     .title {
  //       display: flex;
		// flex-direction: row;
  //       align-items: center;
  //       text {
  //         background: #ff5964;
  //         color: #fff;
  //         font-size: 20rpx;
  //         padding: 8rpx 14rpx;
  //         border-radius: 8rpx;
  //       }
  //       view {
  //         font-size: 36rpx;
  //         font-weight: bold;
  //         margin-left: 20rpx;
  //       }
  //     }
  .title {
          display: flex;
  		flex-direction: row;
          // align-items: center;
          text {
  			display: inline-block;
            background: #ff5964;height: 38rpx;line-height: 38rpx;text-align: center;
  		  position: absolute;left: 0rpx;top: 8rpx;
            color: #fff;
  		  width: 64rpx;
            font-size: 20rpx;
            // padding: 4rpx 10rpx;
            border-radius: 8rpx;
  		  margin-right: 20rpx;
          }
          view {
  			font-weight: 36rpx;
  			font-weight: bold;
          }
	  }
      .cont {
        margin: 20rpx 0;
        font-size: 24rpx;
        color: #424242;
      }
      .tag {
        display: flex;
        view {
          background: #f7f7f7;
          border-radius: 8rpx;
          font-size: 28rpx;
          padding: 10rpx;
          margin-right: 10rpx;
          color: #424242;
        }
        .t1 {
          color: #ff5964;
        }
      }
      .info {
        padding-top: 20rpx;
        padding-bottom: 30rpx;
        margin-top: 20rpx;
        align-items: baseline;
        border-top: 0.5px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        .left {
          .top {
            display: flex;
            align-items: center;
            .name {
              color: #0f0f0f;
              font-weight: bold;
            }
            image {
              width: 28rpx;
              height: 28rpx;
			  margin-left: 14rpx;
			  margin-right: 10rpx;
            }
            .authMe {
              color: #a1a1a1;
              font-size: 24rpx;
            }
			.comp {
			  color: #d9a14e;
			  font-size: 24rpx;
			}
          }
          .addr {
            display: flex;
            color: #a1a1a1;
            font-size: 24rpx;
            margin-top: 10rpx;
            ::v-deep {
              .u-icon {
                margin-right: 14rpx;
              }
            }
          }
        }
        .right {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          .t1 {
            background: #ddffd5;
            color: #424242;
            font-size: 24rpx;
            border-radius: 24rpx;
            padding: 2rpx 10rpx;
          }
		  .t2 {
		    background: #E4F0FF;
		    color: #424242;
		    font-size: 24rpx;
		    border-radius: 24rpx;
		    padding: 2rpx 10rpx;
		  }
          .btn {
            height: 60rpx;
            line-height: 60rpx;
            width: 140rpx;
            text-align: center;
            color: #fff;
            border-radius: 8rpx;
            background: #0575ff;
            font-size: 28rpx;
          }
        }
      }
  }
}
</style>